JavaScript之this对象详解

1.看前热身

看一段代码

<script type="text/javascript">
    var name = "javascript";
    var obj = {
        name:"js",
        foo:function () {
            console.log(this.name);
        }
    };
    //调用foo函数
    obj.foo();   //js
</script>

上面的这段代码中 obj是JavaScript中的对象类型，对象就是属性和方法的集合。
如果执行obj.foo()函数的话，在控制台输出js。
其实this的定义就是，他是js对象中的一个特殊指针，他的指向根据环境的不同而发生改变。

2.this的指向

this的指向：谁调用或者哪个对象调用this所在的函数，this就指向谁。
构造函数的this和普通函数的this指向
构造函数的this

//构造函数和普通函数的this指向
    var  name = '淘宝';
    //构造函数
    function Foo() {
        this.name = '腾讯';
        this.aa = function () {
            console.log(this.name);
        } ;
    }
//    实例化对象
    var obj = new Foo();
    obj.aa();//腾讯

普通函数的this

var name = '淘宝';
function foo() {
    var name =  '腾讯';
    console.log(this.name);
}
foo(); //淘宝

在普通函数中，this指的是window对象，所以在这里输出的依然是‘淘宝’;
更深的一个函数的this

 var name = '淘宝';
    function Foo() {
        this.name = '腾讯';
        this.foo = function () {
            var name  = '百度';
            return function () {
                console.log(this.name);
            }
        }
    }
    var obj  = new Foo();
    obj.foo()();//淘宝

这个函数this的指向依然是window

3.定时器中的this指向

//    定时器中的this
    var name = '淘宝';
    function foo() {
        var name = '腾讯';
        console.log(this.name);
    }
//    定时器
    setTimeout(foo,1000) //淘宝

由此小案例可以看出 定时器中的this指的是window对象。
再来看一个小的示例

var name = '淘宝';
var obj = {
    name :'腾讯',
    fn:function () {
        console.log(this.name);
    },
    foo:function () {
        setTimeout(this.fn,1000);
    }
};
obj.foo();//淘宝

为什么输出的依然是淘宝呢？
obj.foo()调用的是obj对象中的foo()方法，foo()方法里面有一个定时器，而定时器的一个参数是this.fn,这里的this指的就是obj的对象，然后fn()方法里面有调用了this.name，但是定时器中的this指的是window对象，所以最终this.name调用的是window对象中name。

在上面的示例中，把输出的‘淘宝’改成‘腾讯’

 var name = '淘宝';
   var obj = {
       name :'腾讯',
       fn:function () {
           console.log(this.name);
       },
       foo:function () {
           // setTimeout(this.fn.call(obj),1000);
           setTimeout(this.fn.bind(obj),1000);
       }
   };
   obj.foo();//腾讯

在this调用的时候添加bind或者call强制改变this的指向，在这里，指向了obj，所以输出的是obj.name，为‘腾讯’。

4.箭头函数的this

示例

var author = 'lzz';
   var book = {
       author:'ql',
       init:function () {
           setTimeout(ev => {
               console.log(this.author);
           },1000);
       }
   };
   book.init();

箭头函数的特征就是定义在哪，this的指向在那。就是箭头函数定义在一个对象里面，那么箭头函数里面的this就指向该对象。